<template>
	<view style="padding-top: 60rpx;">
		<uni-nav-bar :leftIcon="deleteIcon" :title="'购物车('+catNums+')'" fixed="true" shadow="true" @clickLeft="deleteCart()"></uni-nav-bar>
		<view class="nogoods" v-if="cartGoods.length<1 && logined">
			购物车空空如也
		</view>
		<view class="nologin" v-if="!logined" @click="goLogin()">
			<view class="blankbox">
				暂未登录
				<view class="loginBtn">请先登录</view>
			</view>
		</view>
		<view class="cart-box">
			<view class="goods-box">
				<view class="item" v-for="(item ,i) in cartGoods" :key="item.gid">
					<!-- <label class="gou">
						<u-checkbox shape="circle" v-model="item.isSelect" active-color="red" @change="selectOne(i)"></u-checkbox>
					</label> -->
					<checkbox-group @change="selectOne(i)" class="gou">
						<label>
							<checkbox :checked="item.isSelect" color="red"></checkbox>
						</label>
					</checkbox-group>
					<view class="imgbox" @click="goDetail(item.gid)">
						<image :src="switchImg(item.gImages)" mode="heightFix" class="goods-img"></image>
					</view>
					<view class="goods-info">
						<view class="gname" @click="goDetail(item.gid)">{{item.gName}}</view>
						<view class="jianjie" @click="goDetail(item.gid)">{{item.jianjie}}</view>
						<view class="guigebox" style="color: green;font-size: 6rpx;" @click="goDetail(item.gid)">{{item.guiges}}</view>
						<view class="jiage-box">
							<view class="qian">{{item.price}}</view>
							<!-- <view class="sum">{{item.scatNum}}</view> -->
							<view class="btn-group">
								<view class="jian" @click="numJian(i)">-</view>
								<view class="num">{{item.num}}</view>
								<view class="jia" @click="numJia(i)">+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<!-- <label class="quanxuan">
					<u-checkbox shape="circle" :label-disabled="true" v-model="isAll" active-color="red" @change="selectAll()">全选</u-checkbox>
				</label> -->
				<checkbox-group @change="selectAll()" class="quanxuan">
					<label>
						<checkbox :checked="isAll" color="red">全选</checkbox>
					</label>
				</checkbox-group>
				<view>
					<view>合计：<text class="qian">{{allMoney}}</text></view>
					<view class="nofee">不含运费</view>
				</view>
				<view class="jiesuanBtn" @click="jiesuan()">
					结算({{selectCount}})
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="list" :mid-button="false"></u-tabbar> -->
		<view class="tabbar">
			<view style="text-align: center;" @click="tabbarPage(0)">
				<uni-icons type="home" size="20"></uni-icons>
				<view>首页</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(1)">
				<uni-icons type="map" size="20"></uni-icons>
				<view>联盟商家</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(2)">
				<uni-icons type="list" size="20"></uni-icons>
				<view>分类</view>
			</view>
			<view style="text-align: center;color: #FF7900;">
				<uni-icons type="cart" color="#FF7900" size="20"></uni-icons>
				<view>购物车</view>
			</view>
			<view style="text-align: center;" @click="tabbarPage(4)">
				<uni-icons type="person" size="20"></uni-icons>
				<view>个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {uniNavBar},
		data() {
			return {
				selectGoods:[	],	// 勾选的商品
				isAll:false,		// 是否全选
				cartGoods:[],		// 购物车中的商品
				allMoney:0	,		// 结算金额
				selectCount:0,		// 勾选数量
				deleteIcon: '',		// 右上角图标
				catids:[],			// 选中的购物车ID
				logined:false,		// 用户是否登录
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
						pagePath: "/pages/jifen/index"
					},
					{
						iconPath: "grid",
						selectedIconPath: "grid-fill",
						text: '联盟商家',
						customIcon: false,
						pagePath: "/pages/jifen/merchant/merchantList"
					},
					{
						iconPath: "coupon",
						selectedIconPath: "coupon-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/jifen/goods/goodsFenlei"
					},
					{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/jifen/cart/cart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '个人中心',
						customIcon: false,
						pagePath: "/pages/jifen/center/center"
					},
				],
				current: 3,
				catNums:0,			//购物车数量
			}
		},
		methods: {
			//底部tab跳转
			tabbarPage(index){
				uni.redirectTo({
					url:index==1?'../merchant/merchantList':(index==2?'../goods/goodsFenlei':(index==0?'../index':'../center/center'))
				})
			},
			//跳商品详情
			goDetail(gid){
				uni.navigateTo({
					url:'../goods/goodsDetail?gid='+gid
				})
			},
			// 结算购物车
			jiesuan(){
				if(this.selectCount <= 0){
					this.$u.toast("请选择商品");
				}else{
					this.$http.get('/appcat.do?p=panduanShopsxcx',{
						catid : this.catids
					}).then(res => {
						console.log(res)
						if(res.data.code==500){
							this.$u.toast("暂不支持多商家商品下单！");
						}else{
							uni.navigateTo({
								url:'../goods/confirmOrder?catids='+this.catids
							})
						}
					})
				}
			},
			// 删除购物车
			deleteCart(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确认删除购物车？',
				    success: function (res) {
				        if (res.confirm) {
							let aaa = "";
							for (var i = 0; i < that.catids.length; i++) {
								if(i==0){
									aaa = that.catids[i]
								}else{
									aaa = aaa+","+that.catids[i]
								}
							}
							console.log("积分商城购物车集合："+aaa)
							that.$http.get('/appcat.do', {
								p: 'plcatdeletexcx',
								catid: aaa
							}).then(res => {
								//删除购物车中的商品
								for(let i=0;i<that.cartGoods.length;i++){
									for(let j=0;j<that.catids.length;j++){
										if(that.cartGoods[i].cartid==that.catids[j]){
											that.cartGoods.splice(i,1);
										}
									}
								}
								that.selectCount=0;that.selectGoods=[];that.allMoney=0;that.catids=[];
								that.$u.toast("删除成功");
								that.deleteIcon = "";
								this.isAll = false;
								that.catNums = that.cartGoods.length;
								return;
							})
				        } else if (res.cancel) {
							console.log("用户点击取消");
				        }
				    }
				});
			},
			// 购物车数量增加
			numJia(n){
				this.$http.get('/appcat.do', {
					p: 'editCatNum',
					type: 2,
					catid: this.cartGoods[n].cartid
				}).then(res => {
					this.cartGoods[n].num++;
					if(this.selectGoods.length > 0){
						for(let i=0;i<this.selectGoods.length;i++){
							if(this.cartGoods[n].cartid==this.selectGoods[i].cartid){
								this.allMoney = this.allMoney*1 + this.selectGoods[i].price*1;
							}
						}
						this.allMoney = this.allMoney.toFixed(2)
					}
				})
			},
			numJian(n){
				if(this.cartGoods[n].num==1){
					this.$u.toast("受不了了，再减就没有了哦！");
				}else{
					this.$http.get('/appcat.do', {
						p: 'editCatNum',
						type: 1,
						catid: this.cartGoods[n].cartid
					}).then(res => {
						this.cartGoods[n].num--;
						if(this.selectGoods.length > 0){
							for(let i=0;i<this.selectGoods.length;i++){
								if(this.cartGoods[n].cartid==this.selectGoods[i].cartid){
									this.allMoney = this.allMoney*1 - this.selectGoods[i].price*1;
								}
							}
							this.allMoney = this.allMoney.toFixed(2)
						}
					})
				}
			},
			// 全选
			selectAll(){
				this.isAll=!this.isAll;
				for(let i=0;i<this.cartGoods.length;i++){
					this.cartGoods[i].isSelect=this.isAll;
				}
				this.selectGoods = [];
				this.catids=[];
				this.allMoney = 0;
				for(let i=0;i<this.cartGoods.length;i++){
					if(this.cartGoods[i].isSelect==true){
						this.selectGoods.push(this.cartGoods[i]);
						this.catids.push(this.cartGoods[i].cartid);
					}
				}
				if(this.selectGoods.length > 0){
					this.selectCount = this.selectGoods.length;
					this.deleteIcon = "trash";
					for(let i=0;i<this.selectGoods.length;i++){
						var money = this.selectGoods[i].price*this.selectGoods[i].num;
						this.allMoney = this.allMoney + money;
					}
					this.allMoney = this.allMoney.toFixed(2)
				}else{
					this.deleteIcon = "";
					this.selectCount=0;this.allMoney=0;
				}
			},
			// 选一个
			selectOne(n){
				this.selectGoods=[];
				this.catids=[];
				this.cartGoods[n].isSelect=!this.cartGoods[n].isSelect;
				for(let i=0;i<this.cartGoods.length;i++){
					if(this.cartGoods[i].isSelect==true){
						this.selectGoods.push(this.cartGoods[i]);
						this.catids.push(this.cartGoods[i].cartid);
					}
				}
				this.selectCount = this.selectGoods.length;
				this.allMoney = 0;
				for(let i=0;i<this.selectGoods.length;i++){
					var money = this.selectGoods[i].price*this.selectGoods[i].num;
					this.allMoney = this.allMoney + money;
				}
				this.allMoney = this.allMoney.toFixed(2)
				if(this.selectGoods.length == this.cartGoods.length){
					this.isAll = true;
				}else{
					this.isAll = false;
				}
				if(this.selectGoods.length > 0){
					this.deleteIcon = "trash";
				}else{
					this.deleteIcon = "";
				}	
			},
			switchImg(gimages){
				if(gimages!=null && gimages!="" && gimages!=undefined)
					return this.host+gimages;
				else
					return '../../static/center/tuijian.png';
			},
			//去登录页面
			goLogin(){
				uni.navigateTo({
					url:'../../pages/center/login'
				})
			},
			//得用户积分商城购物车信息
			getJifenCat(){
				this.$http.get('/appcat.do', {
					p: 'getAllCatxcx',
					userid: uni.getStorageSync('usersId')
				}).then(res => {
					this.cartGoods = [];
					for(let i=0;i<res.data.list.length;i++){
						let obj={	};
						for(let key in res.data.list[i].goods)
						{
							obj[key] = res.data.list[i].goods[key];
						}
						if(res.data.list[i].guiges!=undefined){
							obj.guiges = res.data.list[i].guiges;
						}
						obj.cartid = res.data.list[i].scatId;
						obj.num= res.data.list[i].scatNum;
						obj.price = res.data.list[i].money;
						obj.isSelect= false;
						this.cartGoods.push(obj);
					}
					this.catNums = this.cartGoods.length;
				})
			}
		},
		onLoad(opt) {
			this.getJifenCat();
			this.logined = uni.getStorageSync('logined')
			uni.$on('getJifenCat', this.getJifenCat)
		},
		onShow() {
			
		},
		computed:{
			goodsToShow(){
				let arr=[ ];
				for(let i=0;i<this.cartGoods.length;i++){
					let obj ={ 	};
					for(let key in this.cartGoods[i]){
						obj[key] = this.cartGoods[i][key];
					}
					obj.isSelect=false;
					arr.push(obj);
				}
				return arr;
			}
		}
	}
</script>

<style scoped>
	.tabbarImage{
		width: 20px;
		height: 20px;
	}
	.tabbar{
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 998;
		box-sizing: content-box;
		justify-content: space-around;
		background-color: white;
		font-size: 11px;
		padding: 20rpx 0 20rpx 0;
		border-top: 1rpx #DCDFE6 solid;
	}
	
	.nogoods,.nologin{
		text-align: center;
		padding: 200rpx 0rpx;
		background-color: white;
		position: relative;
	}
	.nologin .loginBtn{
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		width: 200rpx;
		margin-left: -100rpx;
		background-color: #FF7900;
		color: white;
		padding: 20rpx 0rpx;
		border-radius: none;
	}
	.cart-box{
		padding-bottom: 220rpx;
		position: relative;
		min-height: 1200rpx;
		background: #F7F7F7;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		padding-bottom: 5rpx;
		border-bottom: 1px #d6d5d5 solid;
		padding-left: 30rpx;
		background-color: white;
	}
	.item .goods-img{
		max-width: 220rpx;
		height: 180rpx;
	}
	.item .btn-group{
		display: flex;
		border: 1px solid #ccc;
		margin-right: 10rpx;
		justify-content: space-around;
	}
	.nofee{
		color: #ccc;
		font-size: 24rpx;
	}
	.qian::before{
		content: '￥';
	}
	.qian{
		font-size: 35rpx;
		color: red;
	}
	.item .goods-info{
		display: flex;
		height: 200rpx;
		flex-direction: column;
		justify-content: space-between;
	}
	.item .jiage-box{
		display: flex;
		justify-content: space-between;
	}
	.item .num{
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
	}
	.item .gou{
		flex: 1;
		/* margin-left: 30rpx; */
	}
	.item .imgbox{
		flex: 4;
	}
	.item .goods-info{
		flex: 7;
	}
	.btn-group .jian,.btn-group .num,.btn-group .jia{
		padding: 10rpx 20rpx;
		flex: 1;
		text-align: center;
	}
	.bottom{
		position: fixed;
		bottom: 123rpx;
		left: 0rpx;
		width: 100%;
		/* height: 60rpx; */
		padding-top: 10rpx;
		display: flex;
		background-color: white;
		justify-content: space-between;
		/* border-top: 1rpx #E8E8E8 solid; */
	}
	.jiesuanBtn{
		background-color: red;
		color: white;
		height: 60rpx;
		padding:0rpx 30rpx;
		margin-right: 20rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
	}
	.quanxuan{
		margin-left: 30rpx;
	}
	.jianjie{
		font-size: 10px;
		color: #C0C4CC;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.sum{
		margin-right: 30rpx;
		font-size: 35rpx;
		color: #909399;
	}
	.sum::before{
		content: 'x';
	}
	/* .fukuanCount::after{
		content: '人付款';
	} */
	.fukuanCount{
		padding-left: 9rpx;
		font-size: 25rpx;
		color: #909399;
	}
</style>
